<template>
    <div class="integral">
        <x-header v-show="!isWeChar" class="myHeader">
            <div slot="default" class="common__header--title">{{pageTitle}}</div>
            <div @click="goBack" slot="overwrite-left" class="common__header--img">
                <img slot="icon" src="~assets/x3/ico/goback1.png" class="go-back">
            </div>
        </x-header>
        <div class="row_list">
            <transition name="slide-fade">
                <!-- max-width:750px; 此宽度用于整体页面固定时-->
                <vue-scroller v-show="showAnimate" :style="scrollerTop" :on-refresh="refresh" :on-infinite="infinite" ref="my_scroller">
                    <div id="row_list" class="weui-panel weui-panel_access">

                        <group class="history__row" v-for="(item, index) in integral.integralCashList" :key="index">
                            <cell :border-intent="false" @click.native="showContent(index)">
                                <!-- 行数据 -->
                                <div slot="title" class="row_left">
                                    <div class="row_left_top">{{item.payeeBank}}</div>
                                    <div class="row_left_bottom">{{item.createTime | filter_time}}</div>
                                </div>
                                <div slot="title" class="row_middle">{{item.score | filter_no}}</div>
                                <div slot="title" class="row_right" style="font-size:12px;">{{item.status | filter_status}}</div>
                                <!-- <div slot="title" class="row_right">{{item.money | filter_moeny}}</div> -->
                                <!-- 右箭头 -->
                                <div :id="'ico_right'+index">
                                    <img src="~assets/x3/ico/more-right.png" width="15">
                                </div>
                            </cell>
                            <!-- 详情 -->
                            <div class="row_slide" :id="'content'+index">
                                <p>
                                    <label>订单编号</label>
                                    <span style="font-size: 12px;">{{item.businessNo}}</span>
                                </p>
                                <p>
                                    <label>兑换金额</label>
                                    <span>{{item.money | filter_moeny}} 元</span>
                                </p>
                                <p>
                                    <label>币种</label>
                                    <span>{{item.currency}}</span>
                                </p>
                                <p>
                                    <label>兑换比例</label>
                                    <span>{{item.rate}}宝豆 ⇋ 1元人民币</span>
                                </p>
                                <p>
                                    <label>收款人姓名</label>
                                    <span>{{item.payee}}</span>
                                </p>
                                <p>
                                    <label>收款人手机号码</label>
                                    <span>{{item.payeePhone | filter_mobile}}</span>
                                </p>
                                <p>
                                    <label>收款银行账号</label>
                                    <span>{{item.payeeAccount | filter_bank_no}}</span>
                                </p>
                                <p>
                                    <label>备注</label>
                                    <span>{{item.remarks}}</span>
                                </p>
                            </div>
                        </group>
                    </div>
                </vue-scroller>
            </transition>
        </div>
    </div>
</template>

<script>
import DateUtil from "src/common/util/dateUtil";
import { RouteUrl, Mutations } from "src/common/const";
import vueScroller from "src/common/vueScroller/components/Scroller";
import { XHeader, CheckerItem, Group, Cell } from "vux";
import { mapState } from "vuex";
export default {
    components: { XHeader, vueScroller, CheckerItem, Group, Cell },
    computed: mapState(["user", "isWeChar", "integral"]),
    data() {
        return {
            pageTitle: "宝豆兑换记录",
            scrollerTop: "position: fixed;padding-top: 48px;padding-bottom: 600px;z-index:0;",
            showAnimate: true,//显示刷新卡片
        }
    },
    filters: {
        //过滤状态
        filter_status(val) {
            if ((val + "").length > 0) {//00成功,1申请失败,2处理中,9失败
                switch (val) {
                    case "00": val = "成功"; break;
                    case "1": val = "申请失败"; break;
                    case "2": val = "处理中"; break;
                    case "9": val = "失败"; break;
                    default: val = "未知"; break;
                }
            } else {
                val = "未知";
            }
            return val;
        },
        //格式化数字
        filter_no(val) {
            val = val + "";
            if (val.length > 3) {
                val = val.replace(/\B(?=(?:\d{3})+\b)/g, ',');
            }
            return val;
        },
        //格式化金额
        filter_moeny(val) {
            if (!isNaN(val)) {
                val = val.toFixed(2);//四舍五入保留2位
            }
            val = val + "";
            if (val.length > 3) {
                val = val.replace(/\B(?=(?:\d{3})+\b)/g, ',');
            }
            return val;
        },
        //格式化时间戳
        filter_time(val) {
            if ((val + "").length > 0) {
                return DateUtil.getDateStr_YmdhmsByTs(val);
            }
            return val;
        },
        //隐藏部分手机号内容
        filter_mobile(val) {
            if (typeof (val) != 'undefined' && val != null && val.length == 11) {
                return val.substring(0, 3) + " ***** " + val.substring(val.length - 3, val.length);
            }
            return val;
        },
        //隐藏部分银行卡号内容
        filter_bank_no(val) {
            if (typeof (val) != 'undefined' && val != null && val.length >= 16) {
                return val.substring(0, 4) + " **** **** **** " + val.substring(val.length - 3, val.length);
            }
            return val;
        }
    },
    methods: {
        goBack() {
            this.$common.goBackUrl(this, RouteUrl.INTEGRAL_EXCHANGE);//返回
        },
        //页面刷新
        refresh(done) {
            let _this = this;
            $("#row_list").fadeOut();
            setTimeout(() => {
                _this.queryDataByType("refresh", done);
                done();
            }, 500);
            $("#row_list").fadeIn();
        },
        //当用户滚动的距离超出底部的内容时触发;
        infinite(done) {
            let _this = this;
            setTimeout(() => {
                _this.queryDataByType("infinite", done);
                done(_this.integral.cashIsEnd);
            }, 500);
        },
        queryDataByType(operation, done) {
            let queryData = {
                _this: this,
                userCode: this.user.userDto.userCode,
                operation: operation,
                done: done
            };
            this.cashIsQuery = true;//可查询
            this.$common.storeCommit(this, Mutations.INTEGRAL_EXCHANGE_LIST, queryData);
        },
        //初始化当前页面
        initPage() {
            //设置滚动区域底部距离
            // this.$common.storeCommit(this, Mutations.IS_SHOW_VUE_SCROLLER_RE, true);
            this.$common.storeCommit(this, Mutations.VUE_SCROLLER_BTN, 600);
            this.$common.storeCommit(this, Mutations.VUE_SCROLLER_NO_MORE_DATA, "没有更多记录了");
            if (this.isWeChar) {
                this.scrollerTop = "position: fixed;padding-top: 2px;padding-bottom: 600px;z-index:0;"
            }
        },
        showContent(index) {
            if ($("#content" + index).hasClass("animate")) {
                $("#content" + index).removeClass("animate");
                $("#ico_right" + index + " img").attr("src", require("src/assets/x3/ico/more-right.png"));
            } else {
                $("#content" + index).addClass("animate");
                $("#ico_right" + index + " img").attr("src", require("src/assets/x3/ico/more-down.png"));
            }
            // this.isShow = !this.isShow;
        },
    },
    created() {
        if (!this.user.isLogin) {
            this.$common.goUrl(this, RouteUrl.LOGIN);//需要登录
            return;
        }
    },
    mounted() {
        document.title = this.pageTitle;
        this.$init.subPageInit(this);
        //初始化当前页面
        this.initPage();
    }
}
</script>

<style lang="scss" >
.integral {
  width: 100%;
  height: 100vh;
  .myHeader {
    z-index: 2;
  }
  .row_list {
    position: relative; // max-width: 750px;
  }

  //group
  .history__row .weui-cell {
    padding: 5px 10px;
  }
  .weui-cells {
    margin-top: 0px !important;
  }
  .weui-cells:before {
    border-top: 0px;
  }
  //标题信息
  .row_left {
    width: 47vw;
    height: 60px;
    line-height: 30px;
    float: left;

    .row_left_top {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .row_left_bottom {
      color: gray;
      font-size: 14px;
    }
  }
  .row_middle {
    width: 22vw;
    height: 60px;
    line-height: 60px;
    float: left;
    text-align: right;
    color: #4d88bf;
  }
  .row_right {
    width: 19vw;
    height: 60px;
    line-height: 55px;
    margin-right: 1vw;
    float: right;
    text-align: right;
    color: #4d88bf;
  }

  //详情
  .row_slide {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.5s cubic-bezier(0, 1, 0, 1) -0.1s;
    padding: 0px 10px;
    font-size: 14px;
    p {
      display: block;
      float: left;
      width: 100%;
      line-height: 26px;
      label {
        display: block;
        float: left;
        width: 35%;
        color: #777;
      }
      span {
        display: block;
        float: right;
        width: 65%;
        color: #C8161D;
        max-height: max-content;
        word-break: break-all;
        // overflow: hidden;
        // text-overflow: ellipsis;
        // white-space: nowrap;
      }
    }
  }

  //显示
  .animate {
    max-height: 9999px;
    transition-timing-function: cubic-bezier(0.5, 0, 1, 0);
    transition-delay: 0s;
  }
}
</style>

